<template>
  <div>
    <ul id="ul2">
      <li v-for="(item1, index) in pharr" :key="index">
        <router-link :to="{path:'/detail' ,query:{id:item1.id}}" tag="li">
          <div class="ph-img">
            <img :src="item1.coverImgUrl" alt="" />
            <p class="updata">{{ item1.updateFrequency }}</p>
          </div>
          <div class="ph-p">
            <!-- <p>1 {{item1.tracks[0].first}}-{{item1.tracks[0].second}}</p> -->
            <p v-for="(y, index) in item1.tracks" :key="index">
              {{ index + 1 }} {{ y.first }}-{{ y.second }}
            </p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { paihang } from "../api/api";
export default {
  data() {
    return {
      pharr: [],
    };
  },
  created() {
    paihang().then((res) => {
      console.log(res);
      this.pharr = res.data.list;
    });
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
#ul2 li {
  display: flex;
  height: 100px;
  // border: 1px solid red;
  margin-top: 10px;
}

.ph-img {
  // z-index: 2;
  position: relative;
  width: 100px;
  height: 100px;
  // border-radius: 20px;
}
.ph-img img {
  width: 100%;
  border-radius: 15px;
}

.ph-p p {
  margin-left: 10px;
  color: gray;
  font-size: 14px;
  margin-top: 10px;
}
.updata {
  position: absolute;
  left: 5px;
  bottom: 5px;
  font-size: 12px;
  color: white;
}
</style>